<template>
  <div class="paginationDiv">
    <div
      ref="totalDiv"
      class="totalDiv"
    >
      <span class="span">
        共<span class="totalNumber">{{ pageData.total }}</span>条记录
      </span>
      <span class="span">
        第<span class="curpage">{{ pageData.page }}</span>页/共<span class="totalPage">{{ pageData.totalPage }}</span>页
      </span>
    </div>
    <div class="pagination">
      <!-- <span
        class="titlePage"
        @click="firstPage"
      >首页</span> -->
      <el-pagination
        background
        layout="prev, pager, next,sizes,jumper"
        :page-size="pageData.pageSize"
        :total="pageData.total"
        :current-page.sync="pageData.page"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <!-- <span
        class="endPage"
        @click="lastPage"
      >尾页</span> -->
    </div>
  </div>
</template>
<script>

export default {
  name: 'Pagination',
  props: {
    pageData: {
      type: Object,
      default: () => {
        return {
          total: 0, // 总条数
          page: 1,
          pageSize: 10,
          totalPage: 0 // 总页数
        }
      }
    },
    /* pagerCount: {
      type: Number,
      default: 8
    } */
  },
  watch: {
    pageData (val) {
      // console.log(val)
    }
  },
  mounted () {
    // console.log(this.pageData)
  },
  methods: {
    /**
     * 跳转至第几页的操作
     */
    handleCurrentChange (val) {
      this.$emit('handle-current-change', val)
    },
    /**
     * 每页展示条数
     */
    handleSizeChange(val) {
      this.$emit('handle-size-change', val)
    },
    /**
     * 跳转到第一页
     */
    firstPage () {
      this.$emit('first-page')
    },
    /**
     * 跳转到最后一页
     */
    lastPage () {
      this.$emit('last-page')
    }
  }
}
</script>
<style lang="scss" scoped>
.paginationDiv {
  display: flex;
  align-items: center;
  margin-top: 35px;
  height: 30px;
  .totalDiv {
    color: #a9a9aa;
    vertical-align: middle;
    font-size: 14px;
    .span {
      display: inline-block;
      height: 28px;
      line-height: 28px;
      margin-right: 10px;
      .toPage {
        display: inline-block;
        width: 50px;
        line-height: 28px;
        padding: 0 2px;
        height: 28px;
        text-align: center;
        margin: 0 2px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 5px;
        background-color: #1b222c;
        border: 1px solid #485660;
        color: #5a5b5c;
        outline: transparent;
      }
      .curpage {
        color: red;
      }
    }
  }
  .pagination {
    position: relative;
    display: flex;
    justify-content: center;
    flex: 1;

    /deep/ .el-pagination {
      display: inline-block;
      text-align: center;
      padding: 0;
      color: #a9a9aa;
      vertical-align: middle;
      .btn-prev:before{
        content: "<";
      }
      .btn-next:before{
        content: ">";
      }
      .el-icon-arrow-left:before {
        display: none;
      }
      .el-icon-arrow-right:before {
        display: none;
      }
      .el-pagination__total {
        color: #a9a9aa;
      }
      .el-pagination__jump {
        color: #a9a9aa;
        /* position: absolute;
        left: 0;
        display: flex;
        top: 0;
        margin-left: 0; */
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;

      }
      .el-input__inner {
        background-color: #ffffff;
        border: 1px solid #dcdcdb;
        border-radius: 5px;
        color: #5a5b5c;
        height: 28px;
        line-height: 14px;
        box-sizing: border-box;
      }
      .el-pager li {
        height: 28px;
      }
      .el-pager li.more {
        &::before {
          line-height: 30px;
        }
      }
      .el-pager li.btn-quicknext {
        line-height: 28px;
      }
      .el-pager li.number {
        color: #5a5b5c;
        font-weight: normal;
        border-radius: 5px;
        font-size:13px;
        padding: 0 14px;
        margin: 0 5px;
        min-width: 30px;
        height: 28px;
        line-height: 28px;
      }
      .el-pager li.active {
        color:#fff;
      }
      .el-pager li.el-icon-more{
        border-radius: 5px;
      }
      .el-pager li:not(.active) {
        background: #ffffff;
        color: #5a5b5c;
        border: 1px solid #dcdcdb;
        font-weight: normal;
      }
      .el-pagination__editor{
        line-height: 18px;
        padding: 0 2px;
        height: 28px;
        margin: 0 2px;
        border-radius: 3px;
      }
      button {
        min-width: 50px;
        line-height: 28px;
        padding: 0 2px;
        height: 28px;
        text-align: center;
        margin: 0 2px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 5px;
        background-color: #ffffff;
        border: 1px solid #dcdcdb;
        color: #5a5b5c;
        font-size: 18px;
      }
    }
    .titlePage,.endPage {
        display: inline-block;
        cursor: pointer;
        width: 50px;
        line-height: 28px;
        padding: 0 2px;
        height: 28px;
        text-align: center;
        margin: 0 2px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 5px;
        background-color: #1b222c;
        border: 1px solid #485660;
        color: #5a5b5c;
        font-size: 12px;
        vertical-align: middle;
    }
    .titlePage {
        margin-left: -14%;
    }
  }
}
</style>
